<template>
	<div class="bookmarksClassAdd">

		<a-page-header style="border-bottom: 1px solid rgb(235, 237, 240);margin-bottom: 16px;" title="书签分类" sub-title="添加分类"
			@back="() => this.$router.go(-1)" />
		<a-row>
			<a-col :xs="8">
				<a-form :labelCol="{span:8}" @submit.prevent="addCategory" :model="category">
					<a-row>
						<a-col>
							<a-form-item label="父级分类名称:">
								<a-input disabled v-model:value="parentCategory.title" />
							</a-form-item>
							<a-form-item label="父级分类ID:">
								<a-input disabled v-model:value="parentCategory.cid" />
							</a-form-item>
							<a-form-item label="分类名称">
								<a-input v-model:value="category.title" />
							</a-form-item>
							<a-form-item>
								<a-button html-type="submit" type="primary">{{text}}</a-button>
							</a-form-item>
						</a-col>
					</a-row>
				</a-form>
			</a-col>
		</a-row>
		
		
		<a-row>
			<a-col :xs="5">
				<a-tree-select v-model:value="parentCategory.cid" show-search style="width: 100%"
					:dropdown-style="{ maxHeight: '400px', overflow: 'auto' }" placeholder="请输入分类" allow-clear
					tree-default-expand-all :tree-data="treeLocData" :replaceFields="{key:'cid', value: 'cid'}">
				</a-tree-select>
			</a-col>
			<a-col :xs="3">
				<a-input v-model:value="title" placeholder="请输入标题" />
			</a-col>
			<a-col>
				<a-button type="primary" @click="addListClass">{{text}}</a-button>
			</a-col>
		</a-row>
	</div>
</template>

<script>
	import {
		categoryCreate,categoryList
	} from '@/commonApi'
	import {
		warning,
		success
	} from '@/antd'
	import {
		mapGetters
	} from 'vuex'
	import {
		ref,
		watch
	} from 'vue';

	export default {
		name: "BookmarksClassAdd",
		setup() {
			const value = ref();

			watch(value, () => {
				console.log(value.value);
			});
			return {
				value,
			};
		},
		data() {
			return {
				treeLocData: [],
				lableCol:{
					span:4
				},
				parentCategory:this.$route.query,
				category:{
					title:'',
					pid:0
				},
				title:'',
				text:'创建一级分类'
			}
		},
		methods: {
			buttonSubmit(){
				if(+this.parentCategory.cid){
					this.text = `创建 - ${this.parentCategory.title} - 分类`
				}else{
					this.parentCategory={
						cid: 0,
						title: '顶级分类'
					}
				}
			},
			addListClass() {
				categoryCreate({
					title:this.title,
					pid:this.parentCategory.cid
				}).then(() => {
					success({
						content:'创建成功',
						duration:1,
						onClose:()=>{
							this.$router.push({
								name:'BookmarksClassList'
							})
						}
					})
					this.$store.dispatch('userList')
				}).catch((err)=>{
					warning(err)
				})
			},
			addCategory(){
				let promise = new Promise((resolve)=>{
					if(this.parentCategory.cid){
						this.category.pid = this.parentCategory.cid
					}
					resolve(this.category)
				})
				
				promise.then((res)=>{
					this.$store.dispatch('addCategory',res)
					.then(()=>{
						success({
							content:'创建成功',
							duration:1,
							onClose:()=>{
								this.$router.push({
									name:'BookmarksClassList'
								})
							}
						})
					})
					.catch((err)=>{
						warning(err)
					})
				})
			}
		},
		watch:{
			"parentCategory.cid":{
				handler(){
					if(this.parentCategory.cid == 0){
						this.text = this.text = `创建 - 顶级 - 分类`
					}else{
						categoryList({
							classId:this.parentCategory.cid
						}).then((res)=>{
							this.text = `创建 - ${res.list[0].title} - 分类`
						})
					}
				}
			}
		},
		computed: {
			...mapGetters(['treeData'])
		},
		created() {
			if (!this.treeData.length) {
				this.$store.dispatch('userList').catch((err) => warning(err))
			}
			this.buttonSubmit()
			this.treeLocData = [{
				cid: 0,
				title: "顶级分类",
				pid: 0
			}, ...this.treeData];
		},
		mounted() {
			
		}
	}
</script>

<style>
</style>
